Weitere Selektoren

Neben den elementaren Selektoren, dem Klassenselektor und dem ID-Selektor existiert noch eine Vielzahl weiterer Selektoren, mit denen einzelne Elemente oder Gruppen von Elementen herausgegriffen werden können.

Multiple Klassen

Ein HTML-Element kann durchaus ein Klassenattribut mit mehreren Werten erhalten.

See the Pen ee12f8a68980861f1579c2a9253aa20d by Bernd Schiller (@Bernie14153) on CodePen.

Mit der Kombination ".rot.fett" werden dabei nur die Elemente angesprochen, die beide Werte für das Klassenattribut enthalten.

Attributselektoren

Wenn ein Element herausgegriffen werden soll, dass ein bestimmtes Attribut besitzt, unabhängig von desssen Wert, kann dafür ein Attributselektor verwendet werden.

See the Pen 8805ab30b65de16efbc1449d9c38a947 by Bernd Schiller (@Bernie14153) on CodePen.

Pseudoklassen

Bei Pseudoklassen handelt es sich um einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt. So lassen sich zum Beispiel Elemente auswählen, über denen sich gerade der Mauszeiger befindet oder Elemente, die das erste Kindelement eines anderen Elementes sind.

Pseudoklassen für Verweise

Bei Verweisen kann unterschieden werden, ob diese schon besucht worden sind oder noch nicht. Mit der Pseudoklasse :link werden Verweise selektiert, welche noch nicht besucht wurden. Mit der Pseudoklasse :visited werden Verweise selektiert, nachdem sie besucht worden sind. Häufig werden auch die dynamischen Pseudoklassen :hover, :active und :focus im Zusammenhang mit Links verwendet und ermöglichen so Interaktivität auf der Webseite, z.B. bei Navigationsleisten.

See the Pen 4bb2e1846513c06db398747e7b9203b9 by Bernd Schiller (@Bernie14153) on CodePen.

Pseudoklassen für Kindelemente

Mit der Pseudoklasse :first-child wird ein Element selektiert, welches das erste Kindelement eines anderen Elementes ist.

Mit der in CSS3 eingeführten Pseudoklasse :last-child kann auch das letzte Kind selektiert werden.

Wenn es erstmal die Möglichkeit gibt, das erste und letzte Kind auszuwählen, ist es naheliegend, dass auch das Bedürfnis aufkommt, jedes andere Kind gezielt anhand seiner Anordnung auswählen zu können. Dies ist möglich mit der in CSS3 eingeführten Pseudoklasse :nth-child(). In der Klammer wir dann ein Ausdruck notiert, welcher angibt, welches Kind selektiert werden soll.

See the Pen 8828b7d8e5c2bcbc8bc70ec98f892398 by Bernd Schiller (@Bernie14153) on CodePen.

Der Ausdruck in der Klammer kann auch ein arithmetischer Ausdruck sein um z.B. jedes zweite Element auszuwählen.

See the Pen 54db59682eb95cb0054c8337b2ecd9ad by Bernd Schiller (@Bernie14153) on CodePen.

Pseudoemente

Die erste Zeile eines Block-Elementes kann mit dem Pseudoelement :first-line selektiert werden. Zum Beispiel könnte so eine (alternative) Präsentation von Absätzen erreicht werden. Der erste Buchstabe der ersten Zeile eines Blockes kann mit dem Pseudoelement :first-letter selektiert werden, falls diesem kein anderer Inhalt vorangeht, etwa Bilder.

See the Pen 3fd7ae9ac71083020ed84f2b3279ebd0 by Bernd Schiller (@Bernie14153) on CodePen.

Erzeugte Strukturen

Mit den Pseudoelementen :before und :after kann angegeben werden, wo erzeugte Strukturen im Dokument einzuordnen sind. Bei Verwendung von :before wird die Struktur vor dem Inhalt des Elementes eingeordnet, bei :after danach. Mit dem Attribut content wird angegeben, was eingeordnet wird. Andere Eigenschaften werden angegeben, um festzulegen, wie die Struktur dargestellt werden soll. :before und :after erzeugen so Boxen, die genau wie im Dokument vorhandene Elemente behandelt werden.

See the Pen 8e8688be6113bfe1f43e4d3dc89b7d73 by Bernd Schiller (@Bernie14153) on CodePen.